<template>
  <div class="page">
    <!-- 轮播 -->
    <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="swiper-item" v-for="(item, index) in goods.photo" :key="index"><img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <van-icon @click="goToBack()" class="fang" name="arrow-left" />
    <div class="product-tip">
      <!-- 商品标题 -->
      <div class="productTitle">
        <p>{{goods.name}}</p>
        <p>{{goods.category_name}}</p>
      </div>
    </div>
    <div class="integer-num">
      <div class="integer-num-left">
        <div class="integer-num-left-l"><span>{{goods.spend_point}}</span>积分</div>
        <!-- <div class="integer-num-left-r">{{2500}}积分</div> -->
      </div>
      <div class="integer-num-right">
        <div>兑换人数{{goods.sale}}</div>
        <span>市场价格￥{{goods.market_price}}</span>
      </div>
    </div>
    <div class="serve">
      <div class="serve-item">
        <span></span>
        <span>7天内发货</span>
      </div>
      <div class="serve-item">
        <span></span>
        <span>正品包邮</span>
      </div>
      <div class="serve-item">
        <span></span>
        <span>30天退换</span>
      </div>
    </div>
    <div class="goods-tab-bar">
      <div @click="changeGoodsTab(0)" class="goods-tab-bar1"  v-bind:class="0 == goodsTab ? 'goods-tab-active' : ''"><span>商品详情</span></div>
      <div @click="changeGoodsTab(1)" class="goods-tab-bar2"  v-bind:class="1 == goodsTab ? 'goods-tab-active' : ''"><span>兑换记录</span></div>
    </div>
    <div class="goods-details" v-if="goodsTab == 0">
      <div v-html='html' class="details-img-337854828"></div>
    </div>
    <div v-else>
      <!-- <div class="exchange-record">
        <div>{{13055668899}}</div>
        <div>一个</div>
        <div>2018.05.11 12:00:00</div>
      </div> -->
    </div>
    <!-- <div class="tuijian" v-if="hasRecommend">
      <p class="tuijian-title">为您推荐</p>
      <div class="tuijian-all">
        <a class="tuijian-item" v-for="(item, index) in recommend" :key="index" @click="goThisPage(item)">
          <img :src="item.img" alt="">
          <p class="tuijian-item-title">{{item.name}}</p>
          <div class="tuijian-item-bottom">
            <span>￥{{item.sell_price}}</span>
            <span>￥{{item.market_price}}</span>
          </div>
        </a>
      </div>
    </div> -->
    <div class="goods-action" v-if="userIntegerlEnough">
      <div class="goods-action-left">
        <div class="goods-action-left-item">
          <img src="../../assets/kefu.png" alt="">
          <div>客服</div>
        </div>
      </div>
      <div class="goods-action-m">
        还差{{needIneger}}积分
      </div>
      <div class="goods-action-r" @click="goToSignIn()">
        签到赚积分
      </div>
    </div>
    <div class="goods-action" v-else>
      <div class="goods-action-left">
        <div class="goods-action-left-item">
          <img src="../../assets/kefu.png" alt="">
          <div>客服</div>
        </div>
      </div>
      <div class="goods-action-m">
        <span>数量</span><van-stepper v-model="count" :disable-input="disableIinput" @plus="addCount()" />
      </div>
      <div class="goods-action-r" @click="openChooseGuige()">
        立即兑换
      </div>
    </div>
    <!-- 选择产品的规格 -->
    <div class="pruduct-guige" v-if="chhooseguige_show">
      <div class="guige-content">
        <div class="guige-content-top">
          <div class="guige-content-top-left">
            <img :src="goods.photo[0].img" alt="">
            <div class="guige-prise">
              <p class="guige-prise-number">
                <span>{{goods.sell_price}}</span>
                <span>{{goods.market_price}}</span>
              </p>
              <p class="kucun">库存：{{goods.store_nums}}</p>
            </div>
          </div>
          <van-icon name="cross" class="cross-icon" @click="closeChooseGuige" />
        </div>

        <div class="pruduct-guige-size" v-if='isProductTwo'>
          <p>{{Object.values(goods.spec_array)[1].name}}</p>
          <div class="choosesize">
            <span v-for="(item, index) in size" :key="index"
              v-bind:class="index == sizeIndex ? 'choosesize-active' : ''"
              v-on:click="chooseSize(index)">{{Object.keys(item)[0]}}</span>
          </div>
        </div>

        <div class="pruduct-guige-color">
          <p>{{Object.values(goods.spec_array)[0].name}}</p>
          <div class="choosecolor">
            <span v-for="(item, index) in color" :key="index"
              v-bind:class="index == colorIndex ? 'choosecolor-active' : ''"
              v-on:click="chooseColor(index)">{{Object.keys(item)[0]}}</span>
          </div>
        </div>

        <div class="pay-button">
          <a @click="goExchange()">确定</a>
        </div>
      </div>
    </div>

    <!--单规格商品弹窗-->
    <div class="pruduct-guige" v-if="danGuiGe">
      <div class="guige-content">
        <div class="guige-content-top">
          <div class="guige-content-top-left">
            <img :src="goods.photo[0].img" alt="">
            <div class="guige-prise">
              <p class="guige-prise-number">
                <span>{{goods.sell_price}}</span>
                <span>{{goods.market_price}}</span>
              </p>
              <p class="kucun">库存：{{goods.store_nums}}</p>
            </div>
          </div>
          <van-icon name="cross" class="cross-icon" @click="closeChooseGuige" />
        </div>
        <div class="pay-button">
          <a @click="goExchange()">确定</a>
        </div>
      </div>
    </div>
    <!--单规格商品选数量结束-->
  </div>
</template>

<script>
  import request from '../../../static/request.js'
  import Qs from 'qs'

  import {
    Notify
  } from 'vant';
  import {
    Dialog
  } from 'vant';

  export default {
    name: "ProductDetails",
    data() {
      return {
        goodsId: '', // 单规格商品ID或商品原始ID
        goodsProductId: '', // 多规格商品ID
        userIntegerlEnough: false, // 用户积分时候充足
        needIneger: '', //还需要多少积分
        isProduct: true, // 判断是否是多规格商品
        isProductTwo: false, // 判断是否是多规格商品二级规格
        count: 1, // 选择商品数量

        chhooseguige_show: false, //选择规格是否显示
        danGuiGe: false, // 无规格商品选择规格是否显示
        goodsTab: 0, // 商品详情还是兑换记录

        goods: {}, // 商品信息
        recommend: [], //为你推荐
        buyLimit: 1, // 商品购买限制

        // 规格、选择规格动态设置CLASS
        color: [],
        colorIndex: 0, // 动态设置CLASS
        size: [],
        sizeIndex: 0, // 动态设置CLASS

        // 多规格商品二
        goodsProductArr: [],

        // 多规格商品一
        productOne: [],

        // 商品规格 0 单规格 1 多规格
        goodsProduct: null,

        //商品详情
        html: null,

        hasRecommend: true, // 服务端是否推荐了商品

        disableIinput: false
      }
    },
    created() {
      let id = this.$route.params.id
      // 返回或刷新也有数据
      if (!id) {
        id = localStorage.getItem('getthisid')
      }
      localStorage.setItem('getthisid', id)

      // 获取商品详情数据
      this.getGoodsInfo(id)

      // 获取为您推荐数据
      request({
        url: '?controller=theapi&action=goods_list',
        method: 'get',
      }).then(res => {
        // 推荐商品不存在
        if (res.data.data == 0) {
          this.hasRecommend = false
          return
        }
        let data = res.data.data
        data.forEach(item => {
          if (item.name.length > 13) {
            item.name = item.name.slice(0, 18) + '...'
          }
        })
        this.recommend = data
      }).catch(err => {
        console.log(err)
      })
    },
    updated() {
      window.scrollTo(0, 0)
    },

    // 方法
    methods: {
      goToBack() {
        this.$router.go(-1)
      },
      // 获取详细的商品信息
      getGoodsInfo(id) {
        request({
          url: '?controller=theapi&action=goods',
          method: 'get',
          params: {
            gid: id
          }
        }).then(res => {
          // 判断商品活动是否失效 hank用户时差
          if (res.data.data == '') {
            if (res.data.return_message == '这件商品不存在或已下架') {
              Dialog.alert({
                title: '提示',
                message: '该商品已下架'
              }).then(() => {
                //this.$router.back()
                this.$router.push('Mall')
              });
            } else if (res.data.return_message == '团购活动不存在') {
              Dialog.alert({
                title: '提示',
                message: '团购活动已结束'
              }).then(() => {
                //this.$router.back()
                this.$router.push('Mall')
              });
            }
          }
          console.log(res)
          let guige = res.data.data.spec_array
          let arr = []
          let arr2 = [{}, {}]
          // 无规格商品
          if (guige == null) {
            this.isProduct = false;
            this.goodsProduct = 0;
            this.goods = res.data.data
            this.goodsProductId = res.data.data.id
            this.html = res.data.data.content
            return
          }

          // 多规格
          console.log('多规格商品')
          
          Object.values(guige).forEach(item => {
            arr.push(item)
          })

          arr.forEach((item, index) => {
            arr2[index].id = item.id
            arr2[index].type = item.type
            arr2[index].value = Object.values(item.value[0])[0]
            arr2[index].name = item.name
            arr2[index].tip = Object.keys(item.value[0])[0]
          })

          this.goodsProduct = 1; 
          this.goodsProductArr = arr2 // 多规格商品默认选中第一

          this.color = arr[0].value
          // 判断是否有两个规格
          if (arr.length == 2) {
            this.isProductTwo = true
            this.size = arr[1].value
          }
          this.goods = res.data.data
          this.goodsId = res.data.data.id
          this.html = res.data.data.content

          // 判断商品活动类型，抢购，团购，积分兑换
          if (res.data.data.is_costpoint) {
            //活动存在
            // 积分兑换活动
            // this.goodsId = data.costpoint.goods_id
            // 请求多规格商品默认选择的价格
            if(this.goods.user.user_point < this.goods.spend_point){
              this.needIneger = this.goods.spend_point - this.goods.user.user_point
              this.userIntegerlEnough = false
            }else{
              this.userIntegerlEnough = true
            }
            // this.getProduct(arr2)
          }else{
            Dialog.alert({
              title: '提示',
              message: '活动已结束，看看其它商品吧'
            }).then(() => {
              //this.$router.back()
              this.$router.push('Mall')
            });
          }
        })
      },
      // changeGoodsTab
      changeGoodsTab(index){
        this.goodsTab = index
      },
      // 打开规格弹窗
      openChooseGuige() {
        if (this.goodsProduct == 0) {
          this.danGuiGe = true
        } else if (this.goodsProduct == 1) {
          this.chhooseguige_show = true
        }
      },
      // 关闭规格弹窗
      closeChooseGuige() {
        this.chhooseguige_show = false,
          this.danGuiGe = false,
          this.danGuiGe = false
      },
      goToShopingCar() {
        this.$router.push({
          name: 'ShoppingCart'
        })
      },
      // 选择规格一
      chooseColor(index) {
        this.colorIndex = index
        let color = this.color
        let arr = this.goodsProductArr
        let goodsId = this.goodsId
        arr[0].value = Object.values(color[index])[0]
        arr[0].tip = Object.keys(color[index])[0]
        this.getProduct(arr)
      },
      // 选择规格二
      chooseSize(index) {
        this.sizeIndex = index
        let size = this.size
        let arr = this.goodsProductArr
        let goodsId = this.goodsId

        arr[1].value = Object.values(size[index])[0]
        arr[1].tip = Object.keys(size[index])[0]


        this.getProduct(arr)
      },
      // 立即购买        
      goExchange() {
        if (this.count < this.buyLimit) {
          this.$dialog.alert({
            title: "提示", //加上标题
            message: `商品${this.buyLimit}件起购`, //改变弹出框的内容
            showCancelButton: true //展示取水按钮
          }).then(() => {
            return
          })
        }
        // 判断是否是多规格商品
        if (this.isProduct) {
          this.$router.push({
            name: 'order1',
            params: {
              gid: this.goodsProductId,
              type: 'product',
              num: this.count
            }
          })
        } else {
          // 单规格
          console.log({
            gid: this.goodsProductId,
            type: 'goods',
            num: this.count
          })
          this.$router.push({
            name: 'determineExchange',
            params: {
              gid: this.goodsProductId,
              type: 'goods',
              num: this.count
            }
          })
        }
      },

      // 去签到页面
      goToSignIn(){
        window.location.href="http://app.ztsx123.com/1/#/qiandao"
      },

      // 为你推荐请求
      goThisPage(item) {
        this.getGoodsInfo(item.id)
      },

      // 判断数量是否超了
      addCount(){
        if(this.count * this.goods.spend_point > this.goods.user.user_point){
          Dialog.alert({
            title: '提示',
            message: '积分不足'
          }).then(() => {
            this.count = this.count - 1
          });
        }
      },

      // 获取多规格商品价格与ID
      getProduct(arr) {
        // console.log(arr)
        let data = {}
        let arr2 = []

        // 倒排序，hank 后台
        arr2.push(arr[1])
        arr2.push(arr[0])

        if (this.isProductTwo) {
          data.specJSON = arr2
        } else {
          data.specJSON = arr2.splice(0, 1)
        }
        data.goods_id = this.goodsId
        data = Qs.stringify(data)

        request({
          url: '?controller=theapi&action=getProduct',
          method: 'post',
          data: data,
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          } // 模拟form表单方式提交请求
        }).then(res => {
          console.log(res)
          this.goodsProductId = res.data.data.id
          this.goods.market_price = res.data.data.market_price
          this.goods.sell_price = res.data.data.sell_price
          this.goods.store_nums = res.data.data.store_nums
        })
      }
    }
  };

</script>

<style scoped>
  .null {
    background: #F5F6F7;
    height: 0.2rem;
  }

  /* 轮播图 */
  .swiper {
    height: 7.5rem;
  }

  .swiper-item {
    background: #ffffff;
    color: white;
  }

  .swiper-item img {
    width: 100%;
  }

  /* 返回按钮 */
  .fang {
    position: absolute;
    font-size: 0.4rem;
    top: 0.23rem;
    left: 0.2rem;
    width: 0.5rem;
    height: 0.9rem;
    z-index: 111;
  }

  .product-tip {
    padding: 0.5rem 0.3rem 0 0.3rem;
    padding-top: 0.1rem;
  }

  /* 商品标题 */
  .productTitle {
    margin-top: 0.2rem;
  }

  .productTitle p:nth-child(1) {
    color: #191E2A;
    font-size: 0.3rem;
  }

  .productTitle p:nth-child(2) {
    color: #B3B5B8;
    font-size: 0.28rem;
    margin-top: 0.1rem;
  }

  /* 积分信息 */
  .integer-num {
    display: flex;
    margin: 0 0.3rem;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0.4rem 0;
  }
  .integer-num .integer-num-left, .integer-num .integer-num-right{
    display: flex;
    width: 50%;
    justify-content: space-between;
    align-items: flex-end;
    color: #B3B5B8;
  }
  .integer-num .integer-num-left{
    justify-content: flex-start;
  }
  .integer-num-left span, .integer-num-right span{
    color: #F52E67;
  }
  .integer-num-left-l{
    font-size: 0.3rem;
    margin-right: 0.2rem;
    color: #191E2A;
  }
  .integer-num-left-l span{
    font-size: 0.48rem;
    line-height: 0.48rem;
  }
  .integer-num-left-r{
    text-decoration-line: line-through;
  }

  /* 服务 */
  .serve {
    background: #F5F6F7;
    display: flex;
    padding: 0.3rem 0.3rem 0.3rem 0;
    font-size: 0.28rem;
    color: #9FA0A5;
  }

  .serve-item {
    display: flex;
    align-items: center;
    margin: 0 0.3rem 0 0.3rem;
  }

  .serve-item span:nth-child(1) {
    width: 0.1rem;
    height: 0.1rem;
    background: #F52E67;
    margin-right: 0.1rem;
  }
  /* goods-tab-active */

  .goods-tab-bar{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom: 0.01rem solid #EFF1F3;
  }
  .goods-tab-bar1{
    padding: 0 0.5rem 0 0;
    font-size: 0.3rem;
  }
  .goods-tab-bar2{
    padding: 0 0 0 0.5rem;
    font-size: 0.3rem;
  }
  .goods-tab-active{
    color: #F52E67;
  }
  .goods-tab-active >span{
    padding: 0 0 0.2rem 0;
    border-bottom: 1px solid #F52E67;
  }

  /* 兑换记录 */
  .exchange-record{
    display: flex;
    padding: 0.3rem 0;
    margin: 0 0 0 0.3rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.26rem;
    color: #191E2A;
    border-bottom: 0.01rem solid #EFF1F3;
  }
  .exchange-record div:last-of-type{
    margin: 0 0.3rem;
    color: #9FA0A5;
  }

  /* 推荐 */
  .tuijian {
    padding: 0.3rem 0 0.3rem 0.3rem;
    margin: 0 0 0.98rem 0;
  }

  .tuijian-title {
    font-size: 0.28rem;
  }

  .tuijian-all {
    margin: 0.3rem 0.3rem 0 0;
    display: flex;
    white-space: nowrap;
    overflow-x: auto;
  }

  .tuijian-all::-webkit-scrollbar {
    display: none
  }

  .tuijian-item {
    display: block;
    white-space: normal;
    border: 1px solid #e6e6e6;
    width: 2.6rem;
    margin-right: 0.3rem;
    border-radius: 0.2rem;
  }

  .tuijian-item img {
    width: 2.6rem;
    height: 2.1rem;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;

  }

  .tuijian-item-title {
    padding: 0.1rem;
  }

  .tuijian-item-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 0.1rem 0.2rem 0.1rem;
  }

  .tuijian-item-bottom span:nth-child(1) {
    font-size: 0.24rem;
    color: #F52E67;
  }

  .tuijian-item-bottom span:nth-child(2) {
    font-size: 0.24rem;
    color: #B3B5B8;
    text-decoration: line-through;
  }

  /*底部购物导航*/
  .goods-action {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 0.98rem;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-top: 0.01rem solid #E6E8EC;
  }
  .goods-action-left{
    display: flex;
    width: 1.1rem;
    justify-content: center;
    border-right: 0.01rem solid #E6E8EC;
  }
  .goods-action-m{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #191E2A;
    font-size: 0.3rem;
  }
  .goods-action-m span{
    margin: 0 0.2rem 0 0;
  }
  .goods-action-r{
    width: 32%;
    height: 0.98rem;
    line-height: 0.98rem;
    text-align: center;
    font-size: 0.26rem;
    color: #fff;
    background: #F52E67;
  }



  /* 选择产品规格弹窗 */
  .pruduct-guige {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5)
  }

  .guige-content {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 9.4rem;
    background: #fff;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;

  }

  .guige-content-top {
    padding: 0.3rem;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
  }

  .guige-content-top img {
    width: 2.28rem;
    height: 2.28rem;
  }

  .guige-content-top-left {
    display: flex;
    align-items: center;
  }

  .cross-icon {
    font-weight: 600;
    font-size: 0.4rem;
    color: #D9DBE0;
  }

  .guige-prise {
    margin-left: 0.43rem;
  }

  .guige-prise-number span:nth-child(1) {
    font-size: 0.46rem;
    color: #F52E67
  }

  .guige-prise-number span:nth-child(2) {
    font-size: 0.26rem;
    color: #B3B5B8;
    text-decoration: line-through;
    margin-left: 0.2rem;
  }

  .kucun {
    padding: 0.2rem 0 0 0;
    font-size: 0.3rem;
    color: #B3B5B8;
  }

  /* 选择颜色 */
  .pruduct-guige-color {
    padding: 0 0.3rem;
    font-size: 0.28rem;
    margin-top: 0.3rem;
  }

  .choosecolor {
    margin-top: 0.2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .choosecolor span {
    display: inline-block;
    margin: 0 0.5rem 0 0;
    width: 1.5rem;
    height: 0.56rem;
    line-height: 0.56rem;
    border-radius: 0.1rem;
    color: white;
    background: #E3E2E2;
    font-size: 0.28rem;
    text-align: center;
    margin-bottom: 0.1rem;
  }

  .choosecolor-active {
    color: white !important;
    background: #F52E67 !important;
  }

  /* 选择尺码 */
  .pruduct-guige-size {
    padding: 0 0.3rem;
    font-size: 0.28rem;
    margin-top: 0.3rem;
  }

  .choosesize {
    margin-top: 0.2rem;
  }

  .choosesize span {
    display: inline-block;
    margin: 0 0.5rem 0 0;
    width: 1.5rem;
    height: 0.56rem;
    line-height: 0.56rem;
    border-radius: 0.1rem;
    font-size: 0.28rem;
    text-align: center;
    margin-bottom: 0.1rem;
    border: 1px solid #e6e6e6;
    color: #C9CACC;
  }

  .choosesize-active {
    color: #F52E67 !important;
    border-color: #F52E67 !important;
  }

  .product-shuliang {
    display: flex;
    justify-content: space-between;
  }

  .product-shuliang {
    margin-top: 0.5rem;
    padding: 0 0.3rem;
    font-size: 0.28rem;
  }

  /* 购买按钮 */
  .pay-button {
    position: fixed;
    display: flex;
    width: 100%;
    bottom: 0;
    height: 1rem;
  }

  .pay-button a {
    line-height: 1rem;
    text-align: center;
    font-size: 0.28rem;
  }

  .pay-button a:nth-child(1) {
    flex: 1;
    background: #F52E67;
    color: white;
  }

</style>
<style>
  /*商品详情图片*/
  .details-img-337854828 {
    width: 100%;
  }
  .details-img-337854828 img {
    display: block;
    width: 100%;
  }
  /*商品详情图片*/

</style>